/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-10-17 15:18:45
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-10-17 16:48:49
 * @FilePath: \fifty-small-projects\42搜索过滤\42.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

let main_by = document.querySelector('.main_by')
let search_input = document.querySelector('.search_input')
let listItems = []

search_input.addEventListener('input',()=> filterData(search_input.value))

async function getData(){
  let res = await fetch('https://randomuser.me/api?results=50')
  let {results} = await res.json()
  main_by.innerHTML = ''
  results.forEach(item => {
    let li = document.createElement('li')
    li.classList.add('user_item')
    listItems.push(li)
    li.innerHTML = `
    <img src="${item.picture.large}" alt="${item.name.first}" class="avatar">
    <div class="user_info">
      <div class="user_name">${item.name.first} ${item.name.last}</div>
      <div class="user_location">${item.location.city}, ${item.location.country}</div>
    </div>`

    main_by.appendChild(li)
  });
}

getData()



function filterData(keywrod) {
  listItems.forEach(item => {
    if (item.innerText.toLowerCase().includes(keywrod.toLowerCase()) || !keywrod) {
        item.classList.remove('hide')
    } else {
        item.classList.add('hide')
    }
    
  })

}
